import './Searcher.css'
import { useState } from 'react'
import SettingComponent from './Settings'
import classNames from 'classnames'
import { util } from '@/utils'

function Searcher(props: any) {
  console.log('--- Searcher ---', props)
  const { onSubmit } = props
  const [dialog, setDialog] = useState(false)

  function submit(event: any) {
    event.preventDefault()
    const inp = event.target.elements.keywords
    onSubmit(inp.value)
    inp.value = ''
  }

  function clearHistory(event: any) {
    util.Weather.clearHistoryList()
    const { form } = event.target
    form.reset()
    onSubmit('')
  }

  return (
    <div className={classNames(`mt-4 container rounded-lg`, props.className)}>
      <div className="w-full  py-3">
        <form id="search-form" className="w-full h-8  rounded flex items-center" onSubmit={submit} autoComplete="off">
          <input className={classNames(`h-full flex-grow px-2 outline-none border-none rounded-md focus:ring-0`, props.className)} type="text" name="keywords" placeholder="请输入城市名称，如：北京" />
          <button className="ml-1 w-24 h-8 bg-green-500 hover:bg-green-600 duration-200 text-white rounded" type="submit">
            查询
          </button>
          <button className="ml-1 w-24 h-8 border-none border-l bg-gray-600 hover:bg-gray-500 duration-200 text-white rounded" type="button" onClick={clearHistory}>
            清除历史
          </button>
          <button className="ml-1 relative w-8 h-8 bg-gray-600 hover:bg-gray-500 duration-200 text-white rounded" type="button" onClick={() => setDialog(true)}>
            <div className="equalizer icon left-2 top-2"></div>
          </button>
        </form>
      </div>

      {dialog && <SettingComponent className={props.className} onClose={() => setDialog(false)} />}
    </div>
  )
}

export default Searcher
